﻿<!DOCTYPE html>
<html ng-app="hrApp">
<head>
    <title>HR App</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var hrApp = angular.module('hrApp', [])
            .controller("EmployeeCtrl", function ($scope) {
                $scope.cities = [{ id: 1, name: "北京" }, { id: 2, name: "上海" },
                                 { id: 3, name: "深圳" }, { id: 4, name: "广州" }];
                $scope.skills = [
                    { category: "编程语言", skill: "C" },
                    { category: "编程语言", skill: "C++" },
                    { category: "编程语言", skill: "C#" },
                    { category: "编程语言", skill: "Java" },
                    { category: "编程语言", skill: "JavaScript" },
                    { category: "数据库", skill: "SQL Server" },
                    { category: "数据库", skill: "Oracle" },
                    { category: "数据库", skill: "MySQL" },
                    { category: "移动应用", skill: "Android" },
                    { category: "移动应用", skill: "iOS" },
                ];

                $scope.checkCity = function (city) {
                    city.checked = !city.checked;
                };
            });
    </script>
</head>
<body ng-controller="EmployeeCtrl">
    <div class="container">
        <div class="well">
            <label class="checkbox-inline" ng-repeat="city in cities">
                <input type="checkbox" ng-click="checkCity(city)"  />{{city.name}}
            </label>
            <br />
            <span ng-repeat="c in cities">
                {{c.name}} : {{ c.checked ? "true":"false"}} |
            </span>
        </div>
        <div class="well">
            <div class="row">
                <div class="col-md-6">
                    <select ng-model="selectedCity1"
                            ng-options="city.name for city in cities">
                        <option value="">选择工作地点</option>
                    </select>
                    <br />
                    <span>{{ selectedCity1 }}</span>
                </div>
                <div class="col-md-6">
                    <select ng-model="selectedCity2"
                            ng-options="city.id as city.name for city in cities">
                        <option value="">选择工作地点</option>
                    </select>
                    <br />
                    <span>{{ selectedCity2 }}</span>
                </div>
            </div>
        </div>
        <div class="well">
            <select ng-model="selectedSkill"
                    ng-options="s.skill group by s.category for s in skills">
                <option value="">选择技能</option>
            </select>
            <br />
            <span>{{ selectedSkill }}</span>
        </div>
    </div>
</body>
</html>
